{% extends 'base/base.html' %}



{% block title %}
今天，你吃了吗
{% endblock %}


{% block main %}
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header bg-success text-white">
                <h3>添加新食物</h3>
            </div>
            <div class="card-body">
                <form method="post">
                    {% csrf_token %}

                    <div class="mb-3">
                        <label for="{{ form.name.id_for_label }}" class="form-label">食物名称 *</label>
                        {{ form.name }}
                        <div class="form-text">例如：宫保鸡丁、番茄鸡蛋面</div>
                    </div>

                    <div class="mb-3">
                        <label for="{{ form.category.id_for_label }}" class="form-label">食物类别 *</label>
                        {{ form.category }}
                        <div class="form-text">
                            如果没有合适的类别，请先联系管理员添加食物类别
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="{{ form.description.id_for_label }}" class="form-label">食物描述</label>
                        {{ form.description }}
                        <div class="form-text">
                            可选的描述信息，可以帮助您和其他用户了解这个食物
                        </div>
                    </div>

                    <div class="mb-3">

                        <label for="{{ form.tags.id_for_label }}" class="form-label">标签</label>
                        {{ form.tags }}
                        <div class="form-text">
                            选择适合此食物的标签，可以多选。按住Ctrl键可选择多个。
                        </div>

                    </div>

                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <a href="{% url 'main:food_library' %}" class="btn btn-secondary me-md-2">取消</a>
                        <button type="submit" class="btn btn-success">添加食物</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- 快速添加提示 -->
        <div class="card mt-4">
            <div class="card-header bg-light">
                <h5 class="mb-0">快速添加提示</h5>
            </div>
            <div class="card-body">
                <ul class="list-unstyled">
                    <li><i class="fas fa-lightbulb text-warning me-2"></i>尽量使用简洁明确的名称</li>
                    <li><i class="fas fa-lightbulb text-warning me-2"></i>选择合适的类别便于分类</li>
                    <li><i class="fas fa-lightbulb text-warning me-2"></i>添加描述和标签可以提高推荐准确性</li>
                    <li><i class="fas fa-lightbulb text-warning me-2"></i>您添加的食物也会对其他用户可见</li>
                </ul>
            </div>
        </div>
        <div class="card mt-4">
            <div class="card-header bg-light">
                <h5 class="mb-0">标签管理</h5>
            </div>
            <div class="card-body">
                <p class="mb-3">没有找到合适的标签？</p>
                <a href="{% url 'main:tag_create' %}" class="btn btn-outline-primary">
                    <i class="fas fa-plus me-1"></i>创建新标签
                </a>
                <a href="{% url 'main:tag_list' %}" class="btn btn-outline-secondary">
                    <i class="fas fa-tags me-1"></i>管理所有标签
                </a>
            </div>
        </div>
    </div>
</div>


{% endblock %}

{% block js %}
    <script>
// 为表单字段添加Bootstrap样式
document.getElementById('{{ form.name.id_for_label }}').classList.add('form-control');
document.getElementById('{{ form.category.id_for_label }}').classList.add('form-select');
document.getElementById('{{ form.description.id_for_label }}').classList.add('form-control');
document.getElementById('{{ form.tags.id_for_label }}').classList.add('form-select');
</script>

{% endblock %}